<!-- Web开发学习页面 -->
<template>
  <div>
    <el-row :gutter="20">
      <!-- 左侧知识类型导航 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>知识类型</span>
          </div>
          <el-menu
            :default-active="selectedType.toString()"
            @select="handleTypeSelect"
            class="knowledge-menu"
          >
            <el-menu-item
              v-for="type in knowledgeTypes"
              :key="type.type"
              :index="type.type.toString()"
            >
              <span>{{ type.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 中间章节列表 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>章节列表</span>
          </div>
          <el-menu
            :default-active="selectedChapter.toString()"
            @select="handleChapterSelect"
            class="chapter-menu"
          >
            <el-menu-item
              v-for="chapter in chapters"
              :key="chapter.chapterId"
              :index="chapter.chapterId.toString()"
            >
              <span>{{ chapter.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 右侧知识内容 -->
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{ currentKnowledge ? currentKnowledge.title : '知识内容' }}</span>
          </div>
          
          <!-- 知识内容 -->
          <div v-if="currentKnowledge" class="knowledge-content">
            <div class="content-text" v-html="formatContent(currentKnowledge.content)"></div>
            
            <!-- 示例代码 -->
            <div v-if="currentKnowledge.exampleCode" class="example-code">
              <h4>示例代码：</h4>
              <pre><code class="language-html">{{ currentKnowledge.exampleCode }}</code></pre>
            </div>
          </div>
          
          <div v-else class="empty-content">
            <el-empty description="请选择知识类型和章节"></el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'WebLearning',
  data() {
    return {
      knowledgeTypes: [], // 知识类型列表
      chapters: [], // 章节列表
      selectedType: 0, // 选中的知识类型
      selectedChapter: 1, // 选中的章节
      currentKnowledge: null, // 当前知识内容
      typeTitles: {
        0: 'HTML基础',
        1: 'CSS样式',
        2: 'JavaScript基础',
        3: '响应式设计',
        4: '前端框架',
        5: '后端技术'
      }
    }
  },
  methods: {
    // 处理知识类型选择
    handleTypeSelect(typeIndex) {
      this.selectedType = parseInt(typeIndex)
      this.selectedChapter = 1
      this.loadChapters()
      this.loadKnowledge()
    },

    // 处理章节选择
    handleChapterSelect(chapterIndex) {
      this.selectedChapter = parseInt(chapterIndex)
      this.loadKnowledge()
    },

    // 加载知识类型列表
    loadKnowledgeTypes() {
      this.$http({
        url: this.$http.adornUrl('/web/knowledge/types'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.knowledgeTypes = data.data || []
          if (this.knowledgeTypes.length > 0) {
            this.selectedType = this.knowledgeTypes[0].type
            this.loadChapters()
          }
        }
      }).catch(() => {
        // 如果API不存在，使用默认数据
        this.knowledgeTypes = Object.keys(this.typeTitles).map(type => ({
          type: parseInt(type),
          title: this.typeTitles[type]
        }))
        this.loadChapters()
      })
    },

    // 加载章节列表
    loadChapters() {
      this.$http({
        url: this.$http.adornUrl(`/web/knowledge/chapters/${this.selectedType}`),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.chapters = data.data || []
          if (this.chapters.length > 0) {
            this.selectedChapter = this.chapters[0].chapterId
            this.loadKnowledge()
          }
        }
      }).catch(() => {
        // 如果API不存在，使用默认数据
        this.chapters = [
          { chapterId: 1, title: '基础入门' },
          { chapterId: 2, title: '进阶应用' }
        ]
        this.loadKnowledge()
      })
    },

    // 加载知识内容
    loadKnowledge() {
      this.$http({
        url: this.$http.adornUrl(`/web/knowledge/${this.selectedType}/${this.selectedChapter}`),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.currentKnowledge = data.data
        } else {
          this.currentKnowledge = null
        }
      }).catch(() => {
        // 如果API不存在，使用默认数据
        this.currentKnowledge = {
          title: `${this.typeTitles[this.selectedType]} - 第${this.selectedChapter}章`,
          content: `这是${this.typeTitles[this.selectedType]}的第${this.selectedChapter}章内容。`,
          exampleCode: `<!-- 示例代码 -->\n<${this.typeTitles[this.selectedType].toLowerCase()}>\n  示例内容\n</${this.typeTitles[this.selectedType].toLowerCase()}>`
        }
      })
    },

    // 格式化内容，将换行符转换为HTML
    formatContent(content) {
      if (!content) return ''
      return content.replace(/\n/g, '<br>')
    }
  },
  mounted() {
    this.loadKnowledgeTypes()
  }
}
</script>

<style scoped>
.knowledge-menu,
.chapter-menu {
  border-right: none;
}

.knowledge-content {
  min-height: 400px;
}

.content-text {
  line-height: 1.6;
  margin-bottom: 20px;
}

.example-code {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.example-code h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.example-code pre {
  margin: 0;
  background-color: #2d3748;
  color: #e2e8f0;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

.example-code code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

.empty-content {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-card {
  margin-bottom: 20px;
}
</style> 